<template>
	<view class="content">
		<view class="treeNav">
			<view class="treeTag" v-for="(item,index) in menus" :class="{'active' :item.id == currentIndex}" @click="changeActive(item.id)">
				{{item.title}}
			</view>

		</view>
		<view class="treeContent">
			<view class="destBox"  @click="openinfo('../destList/destList')">
				<image src="../../static/indexBg1.jpg" mode=""></image>
				<view class="mask">
					<view class="areaName">
						新加坡
						<view class="areaLine">
						</view>
					</view>
				</view>
			</view>
			<view class="destBox">
				<image src="../../static/indexBg2.jpg" mode=""></image>
				<view class="mask">
					<view class="areaName">
						马尔代夫
						<view class="areaLine">
						</view>
					</view>
				</view>
			</view>
			<view class="destBox">
				<image src="../../static/indexBg3.jpg" mode=""></image>
				<view class="mask">
					<view class="areaName">
						泰国
						<view class="areaLine">
						</view>
					</view>
				</view>
			</view>
			<view class="destBox">
				<image src="../../static/indexBg1.jpg" mode=""></image>
				<view class="mask">
					<view class="areaName">
						美国
						<view class="areaLine">
						</view>
					</view>
				</view>
			</view>
			<view class="destBox">
				<image src="../../static/indexBg2.jpg" mode=""></image>
				<view class="mask">
					<view class="areaName">
						日本
						<view class="areaLine">
						</view>
					</view>
				</view>
			</view>
			<view class="destBox">
				<image src="../../static/indexBg3.jpg" mode=""></image>
				<view class="mask">
					<view class="areaName">
						新西兰
						<view class="areaLine">
						</view>
					</view>
				</view>
			</view>
			<view class="remm">
				<view class="name">
					顾问推荐行程
				</view>
				<view class="remmBox">
					<view class="remmPic">
						<image src="../../static/indexBg1.jpg" mode=""></image>
						<view class="dayCount">
							<view class="aa">
								6
							</view>
							<view class="bb">
								天
							</view>
						</view>
					</view>
					<view class="title">
						【新加坡亲子游5天四晚】 环球影城+SEA海洋馆+新山乐高乐园+夜景
					</view>
					<view class="location">
						新加坡 新山
					</view>
				</view>
				<view class="remmBox">
					<view class="remmPic">
						<image src="../../static/indexBg2.jpg" mode=""></image>
						<view class="dayCount">
							<view class="aa">
								6
							</view>
							<view class="bb">
								天
							</view>
						</view>
					</view>
					<view class="title">
						【马尔代夫哈拉岛4晚6日 度假之旅】 性价比超高体验
					</view>
					<view class="location">
						马累 马尔代夫
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				menus: [{
						id: 5,
						title: '亲子a'
					}, {
						id: 9,
						title: '暑期'
					}, {
						id: 3,
						title: '海岛'
					}

				],
				currentIndex: 0,
			};
		},
		mounted: function() {
			var that = this;
			that.currentIndex = this.menus[0].id;
		},
		methods: {

			changeActive: function(id) {
				var that = this;
				that.currentIndex = id;
				console.log(that.currentIndex);
			},
			//跳转页面
			openinfo(url) {

				//var newsid = e.currentTarget.dataset.newsid ;    
				uni.navigateTo({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		border-top: 2rpx solid #b2b2b2;
	}

	.treeNav {
		width: 25%;
		font-family: '微软雅黑';

	}

	.treeTag {
		box-sizing: border-box;
		padding: 30rpx 0;
		padding-right: 40rpx;
		text-align: right;
		border-bottom: 2rpx solid #f2ebeb;
		background: #f7f7f7;
	}

	.treeContent {
		width: 75%;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.active {
		color: #64be78;
		background: #fff;
		border-left: 4rpx solid #64be78;
	}

	.destBox {
		width: 47%;
		height: 240rpx;
		/* border: 2rpx solid; */
		margin-top: 20rpx;
		margin-left: 2%;
		position: relative;
	}

	.destBox image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.destBox .areaName {
		position: absolute;
		color: #fff;
		font-size: 36rpx;
		bottom: 20rpx;
		left: 20rpx;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .3);
		box-sizing: border-box;
	}

	.destBox .areaLine {
		width: 100rpx;
		height: 4rpx;
		background: #fff;
		margin-top: 15rpx;
	}

	.remm {
		width: 100%;
		margin-top: 40rpx;
	}

	.remm .name {
		width: 100%;
		font-size: 34rpx;
		font-weight: bold;
	}

	.remm .remmBox {
		width: 100%;
		padding-top: 6rpx;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #f1f1f1;
	}

	.remm .remmBox .remmPic {
		width: 100%;
		height: 340rpx;
		position: relative;
	}

	.remm .remmBox .remmPic .dayCount {
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		color: #fff;
		display: flex;
		justify-content: flex-start;
		height: 60rpx;
		line-height: 60rpx;
	}

	.remm .remmBox .remmPic .dayCount .aa {
		font-size: 50rpx;
		vertical-align: bottom;
	}

	.remm .remmBox .remmPic .dayCount .bb {
		vertical-align: bottom;
		margin-left: 6rpx;
	}

	.remm .remmBox .remmPic image {
		width: 100%;
		height: 340rpx;
		border-radius: 8rpx;
	}

	.remm .title {
		height: 90rpx;
		width: 100%;
		overflow: hidden;
		font-size: 32rpx;
		font-weight: 500;
		margin-top: 20rpx;
	}

	.remm .location {
		font-size: 24rpx;
		padding: 20rpx 0;
		color: #b3b2b2;
	}
</style>
